<template>
    <div class="demo">
        <div class="left">
            <a-steps
                :current="1"
                :items="[
                    {
                        title: 'Finished',
                    },
                    {
                        title: 'In Progress',
                        subTitle: 'Left 00:00:08',
                    },
                    {
                        title: 'Waiting',
                    },
                ]"
            ></a-steps>
            <a-timeline>
                <a-timeline-item
                    >Create a services site 2015-09-01</a-timeline-item
                >
                <a-timeline-item
                    >Solve initial network problems 2015-09-01</a-timeline-item
                >
                <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
                <a-timeline-item
                    >Network problems being solved 2015-09-01</a-timeline-item
                >
            </a-timeline>
        </div>
        <div class="right">
            <theme />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { DesktopOutlined } from '@ant-design/icons-vue';
import theme from '@/components/theme_config/index.vue';
</script>

<style lang="scss" scoped>
.demo {
    background-color: var(--background-color);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
}
.left {
    padding: 20px;
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.right {
    padding: 20px;
    flex: 1;
}
</style>
